import { Component, OnInit } from '@angular/core';
import { JsonApiService } from "app/core/api/json-api.service";
import { Router, ActivatedRoute } from "@angular/router";
import * as flvjs from 'flv.js';
import * as Hls from 'hls.js';

declare var $: any;
@Component({
	selector: 'sa-video',
	templateUrl: './video1.component.html',
	styleUrls:['./video1.css']
})
export class Video1Component implements OnInit {
	deviceList:any = [];
	videoList:any = [];
	activeLis:string = '';
	player: any;
	flvPlayer: any;
	startTime:string = '';
	endTime:string = '';
	vIcon:string = '0';
	hls:any;
	activeNav = -1;
	constructor(private jsonApiService: JsonApiService,private router: Router) {}
	//设备选中事件
	deviceSelect(item){
		if(item.status == 0){
			this.jsonApiService.message('设备目前不在线!');
			return;
		}
		this.activeNav = -1;
		this.activeLis = item.deviceid;
		this.videoList = [];
		this.realTimeVideo();
	}
	//设备获取
	getDeviceList(){
		this.jsonApiService.http('video/getDeviceList','').subscribe(data=> {
			if(data.success){
				if(data.data&&data.data.length > 0){
					for(let item of data.data){
						if(item.status == 0){
							item.statusText = '离线';
						}else if(item.status == 1){
							item.statusText = '在线';
						}
					}
				}
				this.deviceList = data.data;
			}else{
				this.jsonApiService.message(data.message);
			}
		})
	}
	//实时视频获取
	realTimeVideo(){
		this.destroyVideo();
		this.destroyHlsVideo();
		let reqdata = "terid="+this.activeLis;
		this.jsonApiService.http('video/getVideoIO',reqdata).subscribe(data=> {
			if(data.success){
				this.initFlvPlayer(data.data);
			}else{
				this.jsonApiService.message(data.message);
			}
		})
	}
	
	// 接收子组件传递过来的数据 
	getSelectTableTime(time){
		this.startTime = time.startTime;
		this.endTime = time.endTime;
	}
	//初始化视频播放器
	initVideoPlayer(url){
		this.destroyVideo();
		this.destroyHlsVideo();
		var video = document.getElementById('videoElement');
	  	if(Hls.isSupported()) {
		    this.hls = new Hls();
		    this.hls.loadSource(url);
		    this.hls.attachMedia(video);
//		    this.hls.on(Hls.Events.MANIFEST_PARSED,function() {
//		      video.play();
//	  		});
	  }
	}
	//历史视频搜索
	historyVideoSearch(){
		if(!this.activeLis){
			this.jsonApiService.message('请选择搜索的设备');
			return;
		}
		let timeCheck = common.correctTimeParams(this.startTime,this.endTime,7);
		if(!timeCheck.status){
			this.jsonApiService.message(timeCheck.message);
			return;
		}
		
		if(this.endTime&&this.startTime&&this.activeLis){
			this.getHistoryVideo();
		}
	}
	//历史视频列表
	getHistoryVideo(){
		let reqdata = "terid="+this.activeLis+"&starttime="+this.startTime+"&endtime="+this.endTime;
		this.jsonApiService.http("video/getAllVideoHistoryByTime",reqdata).subscribe(data=> {
			if(data.success){
				if(data.data.length > 0){
					this.videoList = data.data;
				}else{
					this.jsonApiService.message('暂无历史视频数据')
				}
			}else{
				this.jsonApiService.message(data.message);
			}
		})
	}
	videoFileSelected(item,i){
		this.activeNav = i;
		if(item.url){
			this.initVideoPlayer(item.url);
		}
	}
	initFlvPlayer(url){
		this.player = document.getElementById('videoElement');
		if(flvjs.default.isSupported()) {
			// 创建flvjs对象
			this.flvPlayer = flvjs.default.createPlayer({
				type: 'flv', // 指定视频类型
				isLive: true, // 开启直播
				hasAudio: false, // 关闭声音
				cors: true, // 开启跨域访问
				url: url, // 指定流链接
			});
			// 将flvjs对象和DOM对象绑定
			this.flvPlayer.attachMediaElement(this.player);
			// 加载视频
			this.flvPlayer.load();
			// 播放视频
			this.flvPlayer.play();
		}
	}
	ngOnInit(): void {
		this.getDeviceList();
	}

	start(): void {
		this.flvPlayer.play();
	}

	pause(): void {
		this.flvPlayer.pause();
	}

	stop(): void {
			this.flvPlayer.pause();
			this.flvPlayer.unload();
			// 卸载DOM对象
			this.flvPlayer.detachMediaElement();
			// 销毁flvjs对象
			this.flvPlayer.destroy();
	}
	destroyVideo(){
		if(this.flvPlayer){
			this.flvPlayer.pause();
			this.flvPlayer.unload();
			this.flvPlayer.detachMediaElement();
	        this.flvPlayer.destroy();
	        this.flvPlayer = null;
		}
	}
	destroyHlsVideo(){
		if(this.hls){
	        this.hls = null;
		}
	}
	playerIcon(){
		if(this.vIcon == '0'){
			$('#v-player').width('calc(100% - 40px)');
			this.vIcon = '1';
		}else{
			$('#v-player').width('calc(100% - 380px)');
			this.vIcon = '0';
		}
	}
	ngOnDestroy(){
	 	this.destroyVideo();
	}
	
	
}